<!DOCTYPE html> 
<html>
<head>
    <title>the fire net backbone js Hello World</title>
</head>
<body>
    <button id="check">报到</button>
    <ul id="world-list"></ul>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
    (function($){
        World = Backbone.Model.extend({
            default: {
                name: null
            },
            initialize: function(){
                console.log("You create me");
            }
        });
    
        Worlds = Backbone.Collection.extend({
            initialize: function(models, options){
                this.bind("add", options.view.addOneWorld);
            }
        });
        
        AppView = Backbone.View.extend({
            el: $("body"),
            initialize: function(){
                this.worlds = new Worlds(null, {view: this});
            },
            events: {
                "click #check": "checkIn",
                "mouseover #check": "test"
            },
            test: function(){ console.log("mouse in");},
            checkIn: function(){
                var world_name = prompt("请问，您是哪个星球的?");
                if(world_name == "") world_name = "未知";
                var world = new World({name: world_name});
                this.worlds.add(world);
            },
            addOneWorld: function(model){
                $("#world-list").append("<li>这里是来自<b>" + model.get("name") + "</b>星球的问候: hello world!</li>");
            }
        });
        
        var appview = new AppView;
    })(jQuery);
</script>
</html>